<template>
	<view class="container">
		<!-- Search Bar -->
		<view class="search-box">
			<view class="search-bar">
				<text class="iconfont icon-search"></text>
				<input 
					type="text" 
					v-model="searchKeyword" 
					placeholder="搜索学习资源" 
					@confirm="searchResources"
				/>
				<text class="iconfont icon-clear" v-if="searchKeyword" @click="clearSearch"></text>
			</view>
		</view>
		
		<!-- Filter Tabs -->
		<view class="filter-tabs">
			<view 
				class="tab-item" 
				v-for="(tab, index) in filterTabs" 
				:key="index"
				:class="{ active: currentFilterTab === index }"
				@click="switchFilterTab(index)"
			>
				<text>{{ tab }}</text>
			</view>
		</view>
		
		<!-- Smart Quiz Banner -->
		
		
		<!-- Resource Type Filters -->
		<view class="type-nav-container">
			<scroll-view class="type-filters" scroll-x="true" show-scrollbar="false">
				<view 
					class="type-item" 
					v-for="(type, index) in resourceTypes" 
					:key="index"
					:class="{ active: activeType === type.id }"
					@click="filterByType(type.id)"
				>
					<text>{{ type.name }}</text>
				</view>
			</scroll-view>
		</view>
		
		<!-- Resources List -->
		<view class="resources-list" v-if="filteredResources.length > 0">
			<view class="resource-card" v-for="(resource, index) in filteredResources" :key="index" @click="openResource(resource)">
				<image :src="resource.coverImage" mode="aspectFill" class="resource-cover"></image>
				<view class="resource-info">
					<text class="resource-title">{{ resource.title }}</text>
					<view class="resource-meta">
						<text class="resource-type">{{ getResourceTypeName(resource.typeId) }}</text>
						<text class="resource-size">{{ resource.size }}</text>
					</view>
					<view class="resource-footer">
						<text class="resource-author">{{ resource.author }}</text>
						<text class="resource-downloads">{{ resource.downloads }}次下载</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- Empty State -->
		<view class="empty-state" v-else>
			<image src="/static/empty.png" mode="aspectFit" class="empty-image"></image>
			<text class="empty-text">暂无相关资源</text>
		</view>
		
		<!-- Floating Action Button -->
		<view class="floating-btn" @click="uploadResource">
			<text class="btn-icon">+</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 状态变量
const searchKeyword = ref('');
const filterTabs = ref(['全部', '最新', '热门', '收藏']);
const currentFilterTab = ref(0);
const resourceTypes = ref([
	{ id: 0, name: '全部' },
	{ id: 1, name: '电子书' },
	{ id: 2, name: '视频' },
	{ id: 3, name: '文档' },
	{ id: 4, name: '试卷' },
	{ id: 5, name: '课件' },
	{ id: 6, name: '代码' }
]);
const activeType = ref(0);
const resources = ref([
	{
		id: 1,
		title: '人工智能导论 - 第4版',
		typeId: 1,
		author: '斯图尔特·罗素',
		size: '12.5MB',
		downloads: 2560,
		coverImage: '/static/ai_book.jpg'
	},
	{
		id: 2,
		title: '高等数学视频教程',
		typeId: 2,
		author: '王教授',
		size: '1.2GB',
		downloads: 1890,
		coverImage: '/static/math_video.jpg'
	},
	{
		id: 3,
		title: '数据结构与算法 - 学习笔记',
		typeId: 3,
		author: '李明',
		size: '4.7MB',
		downloads: 3420,
		coverImage: '/static/algorithm_doc.jpg'
	},
	{
		id: 4,
		title: '大学英语四级模拟试题',
		typeId: 4,
		author: '张教授',
		size: '2.1MB',
		downloads: 5670,
		coverImage: '/static/english_exam.jpg'
	},
	{
		id: 5,
		title: 'Python编程基础课件',
		typeId: 5,
		author: '刘老师',
		size: '18.3MB',
		downloads: 2140,
		coverImage: '/static/python_slide.jpg'
	},
	{
		id: 6,
		title: '深度学习实战代码',
		typeId: 6,
		author: '陈工程师',
		size: '3.5MB',
		downloads: 1780,
		coverImage: '/static/dl_code.jpg'
	},
	{
		id: 7,
		title: '物理学基础知识汇总',
		typeId: 3,
		author: '吴教授',
		size: '5.9MB',
		downloads: 1230,
		coverImage: '/static/physics_doc.jpg'
	},
	{
		id: 8,
		title: '计算机网络原理',
		typeId: 1,
		author: '郑老师',
		size: '9.2MB',
		downloads: 2340,
		coverImage: '/static/network_book.jpg'
	}
]);

// 计算属性
const filteredResources = computed(() => {
	let result = [...resources.value];
	
	// Filter by type
	if (activeType.value !== 0) {
		result = result.filter(item => item.typeId === activeType.value);
	}
	
	// Filter by search keyword
	if (searchKeyword.value) {
		const keyword = searchKeyword.value.toLowerCase();
		result = result.filter(item => 
			item.title.toLowerCase().includes(keyword) || 
			item.author.toLowerCase().includes(keyword)
		);
	}
	
	// Apply tab filters
	switch(currentFilterTab.value) {
		case 1: // 最新
			result.sort((a, b) => b.id - a.id); // Assuming newer items have higher IDs
			break;
		case 2: // 热门
			result.sort((a, b) => b.downloads - a.downloads);
			break;
		case 3: // 收藏 (假设有收藏功能)
			// 这里应该筛选出已收藏的资源
			// 暂时随机挑选一些作为示例
			result = result.filter(item => item.id % 3 === 0);
			break;
		default:
			// 全部，不需要额外处理
			break;
	}
	
	return result;
});

// 方法
function searchResources() {
	// 搜索资源的方法
	uni.showToast({
		title: `搜索: ${searchKeyword.value}`,
		icon: 'none'
	});
	// 实际应用中，这里应该通过API搜索资源
}

function clearSearch() {
	searchKeyword.value = '';
}

function switchFilterTab(index) {
	currentFilterTab.value = index;
}

function filterByType(typeId) {
	activeType.value = typeId;
}

function getResourceTypeName(typeId) {
	const type = resourceTypes.value.find(item => item.id === typeId);
	return type ? type.name : '未知类型';
}

function openResource(resource) {
	uni.showToast({
		title: `打开资源: ${resource.title}`,
		icon: 'none'
	});
	// 实际应用中，这里应该根据资源类型打开不同的页面
	// 例如：电子书阅读器、视频播放器等
}

function goToQuiz() {
	uni.switchTab({
		url: '/pages/quiz/quiz'
	});
}

function uploadResource() {
	uni.showModal({
		title: '上传资源',
		content: '您要上传学习资源吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '进入上传页面',
					icon: 'none'
				});
				// 实际应用中，这里应该跳转到资源上传页面
			}
		}
	});
}
</script>

<style>
.container {
	padding: 30rpx;
	padding-bottom: 100rpx;
	background-color: #f8f9fa;
}

/* Search Bar Styles */
.search-box {
	padding: 10rpx 0;
	margin-bottom: 30rpx;
}

.search-bar {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 50rpx;
	padding: 15rpx 25rpx;
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
}

.search-bar .iconfont {
	margin-right: 15rpx;
	color: #999;
}

.search-bar input {
	flex: 1;
	height: 40rpx;
	font-size: 28rpx;
}

.search-bar .icon-clear {
	color: #ccc;
}

/* Filter Tabs Styles */
.filter-tabs {
	display: flex;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	box-shadow: none;
	border: none;
	overflow: hidden;
}

.filter-tabs .tab-item {
	flex: 1;
	text-align: center;
	padding: 25rpx 0;
	font-size: 28rpx;
	color: #666;
	position: relative;
	transition: all 0.3s ease;
}

.filter-tabs .tab-item.active {
	color: #007AFF;
	font-weight: bold;
	background-color: rgba(0, 122, 255, 0.08);
}

.filter-tabs .tab-item.active::after {
	content: none;
}

/* Quiz Banner Styles */
.quiz-banner {
	position: relative;
	height: 160rpx;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
}

.banner-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

.banner-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 0 30rpx;
}

.banner-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 10rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.banner-desc {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 20rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.banner-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	padding: 10rpx 30rpx;
	border-radius: 100rpx;
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.banner-btn text {
	font-size: 24rpx;
	font-weight: bold;
	color: #007AFF;
}

/* Type Filters Styles */
.type-nav-container {
	margin-bottom: 30rpx;
}

.type-filters {
	white-space: nowrap;
	padding: 5rpx 0;
}

.type-item {
	display: inline-block;
	padding: 16rpx 32rpx;
	margin-right: 20rpx;
	border-radius: 50rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #666;
	background-color: #f1f3f5;
	transition: all 0.3s ease;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.type-item.active {
	color: #fff;
	background-color: #007AFF;
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
	transform: translateY(-2rpx);
}

/* Resources List Styles */
.resources-list {
	display: flex;
	flex-direction: column;
}

.resource-card {
	display: flex;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	padding: 24rpx;
	box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease;
}

.resource-card:active {
	transform: scale(0.98);
}

.resource-cover {
	width: 180rpx;
	height: 180rpx;
	border-radius: 16rpx;
	margin-right: 24rpx;
}

.resource-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.resource-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 16rpx;
	line-height: 1.4;
}

.resource-meta {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.resource-type {
	font-size: 24rpx;
	color: #007AFF;
	background-color: #e6f2ff;
	padding: 6rpx 16rpx;
	border-radius: 20rpx;
	margin-right: 15rpx;
}

.resource-size {
	font-size: 24rpx;
	color: #999;
}

.resource-footer {
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	color: #999;
}

/* Empty State Styles */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

/* Floating Button Styles */
.floating-btn {
	position: fixed;
	bottom: 50rpx;
	right: 50rpx;
	width: 100rpx;
	height: 100rpx;
	background-color: #007AFF;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-btn:active {
	transform: scale(0.95);
	box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.3);
}

.btn-icon {
	font-size: 50rpx;
	color: #fff;
}
</style> 